<template>
  <div class="coupon-add"
    ref="wrap">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增活动</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content"
      style="width:800px">
      <p class="title">
        基础信息
      </p>
      <el-form label-width="200px"
        :disabled="type==1"
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules">
        <el-form-item label="活动名称"
          prop="name">
          <el-input placeholder="请输入活动名称"
            clearable
            v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="添加优惠券模版"
          prop="couponId">
          <el-select v-model="ruleForm.couponId"
            style="width:500px;"
            size="small"
            multiple
            filterable
            default-first-option
            placeholder="请选择酒店">
            <el-option v-for="item in couponList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="领取次数限制"
          prop="sellNum">
          <el-input-number v-model="ruleForm.sellNum"
            controls-position="right"
            :min="0"
            :precision="0"></el-input-number>
          <span>（输入0代表无限制）</span>
        </el-form-item>
        <el-form-item label="是否需要填写手机号"
          prop="isPhone"
          required>
          <el-radio :label="1"
            v-model="ruleForm.isPhone">需要</el-radio>
          <el-radio :label="2"
            v-model="ruleForm.isPhone">不需要</el-radio>
        </el-form-item>
        <el-form-item label="活动时间"
          prop="startTime"
          required>
          <el-date-picker v-model="startEndTime"
            :picker-options="pickerOptions"
            @change="startEndTimeChange"
            type="datetimerange"
            size="small"
            :clearable="false"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <p class="title">
          落地页设置
        </p>
        <el-form-item label="落地页标题"
          prop="floorName">
          <el-input placeholder="请输入落地页标题"
            clearable
            v-model="ruleForm.floorName"></el-input>
        </el-form-item>
        <el-form-item label="落地页头图"
          prop="floorHead">
          <uploadPic v-model="ruleForm.floorHead"></uploadPic>
        </el-form-item>

        <el-form-item label="活动规则"
          prop="activityRules">
          <el-input type="textarea"
            show-word-limit
            rows="8"
            placeholder="请输入内容"
            v-model="ruleForm.activityRules"
            maxlength="300">
          </el-input>
        </el-form-item>
        <el-form-item label="规则文字颜色"
          prop="hueRulesText">
          <el-color-picker v-model="ruleForm.hueRulesText"></el-color-picker>
        </el-form-item>
        <el-form-item label="领取按钮文字颜色"
          prop="hueButtonText">
          <el-color-picker v-model="ruleForm.hueButtonText"></el-color-picker>
        </el-form-item>
        <el-form-item label="领取按钮颜色"
          prop="hueButton">
          <el-color-picker v-model="ruleForm.hueButton"></el-color-picker>
        </el-form-item>
        <el-form-item label="背景颜色"
          prop="hueBackgr">
          <el-color-picker v-model="ruleForm.hueBackgr"></el-color-picker>
        </el-form-item>
        <p class="title">
          分享设置
        </p>
        <el-form-item label="分享显示标题"
          prop="shareName">
          <el-input placeholder="请输入分享显示标题"
            v-model="ruleForm.shareName"></el-input>
        </el-form-item>
        <el-form-item label="分享显示图片"
          prop="shareImg">
          <uploadPic v-model="ruleForm.shareImg"></uploadPic>
        </el-form-item>
      </el-form>
    </div>
    <div class="information-btns"
      :style="{width:width}">
      <el-button size="small"
        v-if="!type"
        type="primary"
        @click="sure('ruleForm')">保存</el-button>
      <el-button size="small"
        @click="back">取消</el-button>
    </div>
  </div>
</template>

<script>
import uploadPic from "@/components/common/uploadPic";
import {
  editActivity,
  activityInfo,
  getCouponPull
} from "@/public/js/coupon.js";
export default {
  components: {
    uploadPic
  },
  props: {},
  data() {
    var checkTime = (rule, value, callback) => {
      setTimeout(() => {
        if (!value) {
          return callback(new Error("请输人活动时间"));
        }
        if (value == this.ruleForm.endTime) {
          callback(new Error("结束时间不能小于等于开始时间"));
        } else {
          callback();
        }
      }, 1);
    };
    return {
      type: "",
      id: "",
      couponList: [],
      startEndTime: [],
      width: "",
      pickerOptions: {
        disabledDate: function disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      ruleForm: {
        id: "",
        couponId: [],
        name: "",
        sellNum: undefined,
        startTime: "",
        endTime: "",
        isPhone: 1,
        floorName: "",
        floorHead: "",
        activityRules: "",
        hueRulesText: "",
        hueButtonText: "",
        hueButton: "",
        hueBackgr: "",
        shareName: "",
        shareImg: ""
      },
      rules: {
        couponId: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个优惠券模板",
            trigger: "change"
          }
        ],
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        sellNum: [
          { required: true, message: "请输入领取次数限制", trigger: "blur" }
        ],
        startTime: [{ validator: checkTime, trigger: "blur" }],
        floorName: [
          { required: true, message: "请输入落地页标题", trigger: "blur" }
        ],
        floorHead: [
          { required: true, message: "请上传落地页头图 ", trigger: "change" }
        ],
        activityRules: [
          { required: true, message: "请输入活动规则", trigger: "change" }
        ],
        hueRulesText: [
          {
            required: true,
            message: "请选择规则文字颜色",
            trigger: "change blur"
          }
        ],
        hueButtonText: [
          {
            required: true,
            message: "请选择领取按钮文字颜色",
            trigger: "change blur"
          }
        ],
        hueButton: [
          {
            required: true,
            message: "请选择领取按钮文字颜色",
            trigger: "change blur"
          }
        ],
        hueBackgr: [
          { required: true, message: "请选择背景颜色", trigger: "change blur" }
        ],
        shareName: [
          { required: true, message: "请输入分享显示标题 ", trigger: "blur" }
        ],
        shareImg: [
          { required: true, message: "请上传分享显示图片", trigger: "change" }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取优惠券模板
    _getCouponPull() {
      getCouponPull().then(res => {
        this.couponList = res.data.pulls;
      });
    },
    //获取活动详情
    _activityInfo() {
      activityInfo({ id: this.id }).then(res => {
        let {
          couponIds,
          name,
          sellNum,
          startTime,
          endTime,
          isPhone,
          floorName,
          floorHead,
          activityRules,
          hueRulesText,
          hueButtonText,
          hueButton,
          hueBackgr,
          shareName,
          shareImg
        } = res.data.buyInfo;
        this.ruleForm = {
          id: this.id,
          couponId: couponIds,
          name,
          sellNum,
          startTime,
          endTime,
          isPhone,
          floorName,
          floorHead,
          activityRules,
          hueRulesText,
          hueButtonText,
          hueButton,
          hueBackgr,
          shareName,
          shareImg
        };
        this.startEndTime = [startTime, endTime];
      });
    },

    startEndTimeChange(startEndTime) {
      if (!startEndTime) {
        this.ruleForm.startTime = "";
        this.ruleForm.endTime = "";
      } else {
        this.ruleForm.startTime = startEndTime[0];
        this.ruleForm.endTime = startEndTime[1];
      }
    },
    back() {
      this.$router.go(-1);
    },
    //保存
    sure(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          editActivity(this.ruleForm).then(res => {
            if (!res.data.errCode) {
              this.$message.success("操作成功");
              this.back();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  created() {
    this.id = this.$route.query.id ? this.$route.query.id : "";
    console.log(this.$route.query);
    this.type = this.$route.query.type;
    this._getCouponPull();
    if (this.id) {
      this._activityInfo();
    } else {
      this.ruleForm = {
        id: "",
        couponId: [],
        name: "",
        sellNum: undefined,
        startTime: "",
        endTime: "",
        isPhone: 1,
        floorName: "",
        floorHead: "",
        activityRules: "",
        hueRulesText: "",
        hueButtonText: "",
        hueButton: "",
        hueBackgr: "",
        shareName: "",
        shareImg: ""
      };
    }
  },
  mounted() {
    this.width = this.$refs.wrap.offsetWidth + "px";
  }
};
</script>
<style lang="scss" scoped>
.coupon-add {
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #6d2377;
  }
  .information-btns {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.1);
    z-index: 1111;
  }
  .el-tag {
    margin-right: 10px;
  }
}
.easy-content {
  padding-bottom: 60px;
}
</style>